<template>
    <div>
    <ul v-if="resData.length > 0">
        <van-list
            style="flex-direction: column;"
            v-model="loading"
            :finished="finished"
            :error.sync="error"
            :immediate-check="immediateCheck"
            error-text="请求失败，点击重新加载"
            finished-text="没有更多了"
            @load="onLoad"
            >
            <li  class="item-box" v-for="(item,index) in resData" :key="index">
                <div class="item-info">
                    <p class="item-name">昵称:{{item.nickname}}</p> 
                    <p class="item-id">会员id:{{item.user_id}}</p>
                    <p class="item-time">签署时间:{{item.create_time}}</p>
                </div>
                <div class="item-xy" @click="seeXy(item.content)">查看协议</div>
            </li>
        </van-list>
    </ul>
    <div v-else>
      <no-data :noData=noData></no-data>
    </div>        
    </div>
</template>

<script>
import noData from '@/components/noData/index'
import { fxProtocolList } from '@/api/dz/dzApi.js'
import Vue from 'vue'
import { Dialog } from 'vant'
import { List } from 'vant'
Vue.use(Dialog)
Vue.use(List)
export default Vue.extend ({
  components: {
    noData
  },
  data() {
    return {
      page: 1,
      loading: false,
      finished: false,
      error: false,
      immediateCheck: false,
      // resData: {}
      resData: []
    }
  },
  created() {
    const p = this.p
    fxProtocolList({ p }).then(res => {
      if (res.status == 1) {
        // console.log(res)
        this.resData = res.data.data
        this.loading = false
      } else {
        this.$Error(res.msg)
      }
    })
  },
  methods: {
    onLoad() {
      this.p += 1
      const p = this.p
      fxProtocolList({ p }).then(res => {
        if (res.status == 1) {
          // console.log(res)
          this.resData.push(res.data.data)
          this.loading = false
          if (res.data.data < 10) {
            this.finished = true
          }
        } else {
          this.$Error(res.msg)
        }
      })
    },
    seeXy(content) {
      Dialog.confirm({
        title: '协议',
        confirmButtonText: '了解',
        showCancelButton: false,
        message: content
      })
        .then(() => {
          // on confirm
        })
    }
  },
  mounted() {
    // TODO 小程序触底加载更多
      window.addEventListener('reachbottom', () => {
        this.onLoad()
      })
      // console.log(this.resData, 'demo2')
  }
})
</script>

<style lang="scss">
.item-box{
    margin: 25px;
    padding: 20px;
    border-radius: 10px;
    background: #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28px;
    .item-info{
        .item-name{
            padding-bottom: 25px;
        }
        .item-time{
            padding-top: 25px;
        }
    }
    .item-xy{
        border: thin solid red;
        padding: 10px;
        border-radius: 20px;
    }
}
</style>